<template>
  <van-tabbar v-model="active" active-color="#fc6627" route>
    <van-tabbar-item to="/">
      <span>首页</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="home1"></GeekIcon>
        <GeekIcon v-else name="home"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/question">
      <span>问答</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="search"></GeekIcon>
        <GeekIcon v-else name="search1"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/video"
      ><span> 视频</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="people1"></GeekIcon>
        <GeekIcon v-else name="people"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user"
      ><span>我的</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="set"></GeekIcon>
        <GeekIcon v-else name="setting"></GeekIcon>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import GeekIcon from './geek-icon.vue'
export default {
  name: 'AppTabbar',
  components: {
    GeekIcon
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped>
.abc {
  display: block;
}
</style>
